<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*炸弹图片的大小设置*/
        .boom > img{
            width: 450px;
            height: 450px;
        }
        /*倒计时字体、颜色、位置的设置*/
        .timer{
            font-size: 32px;
            color: red;
            font-weight: bolder;
            position: absolute;
            top: 165px;
            left: 169px;
        }
    </style>
</head>
<body>
    <!--炸弹整体盒子-->
    <div class="boom">
        <img src="炸弹.jpg">
        <div id="timer" class="timer">00:00:03</div>
    </div>
    <!--JS用于设置轮循计时器-->
    <script>
        var number = 2;
        var timer = document.getElementById("timer"); //取得时间盒子
        var interval = setInterval( //轮循计时器
            function () { //每秒数字减一方法
                t = "0" + number; // 秒上的数据
                timer.innerText = "00:00:" + t; //每次计时文本显示
                if (number < 0){ //时间小于零清楚计时器以及文本显示
                    clearInterval(interval);
                    timer.innerText = "";
                    window.location.href = "ImageBomb-master/index.html"
                }else { //大于一减一
                    number -= 1;
                }
            },1000//一秒进行一次事件
        )
    </script>
</body>
</html>